<template>
    <div :id="idName"></div>
</template>
<script>
import { Column } from '@antv/g2plot';
export default {
  name: 'columnChart',
  props: {
    transferData: Array
  },
  data () {
    return {
      columnPlot: null,
      idName: ''
    };
  },
  watch: {
    transferData (val) {
      this.columnPlot.changeData(val);
    },
  },
  created () {
    this.idName = 'column-' + Math.random().toString(36).slice(-4); // 随机生成id
  },
  mounted () {
    this.initChart();
  },
  methods: {
    initChart () {
      const self = this;
      this.columnPlot = new Column(self.idName, {
      data: self.transferData,
      isStack: true,
      xField: 'text',
      yField: 'value',
      seriesField: 'type',
      color: ['#5364B0','#da4040'],
      legend: {
        layout: 'horizontal',
        position: 'top-right',
        itemName: {
          style: {
            fill: '#1d2129'
          }
        }
      },
      scrollbar: {
        type: 'horizontal',
        categorySize: 80, // 每个柱子的宽度
        height:6,
      },
        xAxis: {
          tickCount: 8, //横坐标的显示刻度
          label: {
            style: {
              fill: '#1d2129',
              fontSize: 12
            },
            rotate: false
          },
          line: {
            style: {
              lineWidth: 0.2,
              stroke: '#ddd',
            }
          }
        },
      });
      this.columnPlot.render();
    }
  }
};
</script>
<style lang="scss" scoped>
  div{
    width: 100%;
    height: 300px;
  }
</style>
